<html class="ui-mobile">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<link rel="stylesheet" href="jquery.mobile-1.0b2.min.css">
		<script src="./Page Title_files/jquery-1.6.2.min.js"></script>
		<script src="./Page Title_files/jquery.mobile-1.0b2.min.js"></script>
		<script type="text/javascript" src="Scripts/jGFeed/jquery.jgfeed-min.js"></script>
		<link rel="stylesheet" type="text/css" href="estilo.css" />
		<title>GiveMeAPlan!!</title>
	</head> 

	<body>
	
		<div data-role="page" id="splash">			
		 <!--<div data-role="header" data-position="fixed" >
			 <h1>LeXIS</h1>
		  </div>-->	
			<img src="logo.png" class="splash" align="center" onClick="loadMain()" />
			<!--loadMain() href="#principal"  -->
			<h2> Bienvenido a GiveMeAPlan!! </h2>
			
			
			<p><a id="enter" data-role="button" onClick="loadMain()">Entrar</a> </p>
		
		</div>
	
		<!-- Quitar de aqui la carga dinamica de opciones, a menos que quieras quitarlas por algun motivo de forma dinamica. -->
		<div data-role="page" id="principal">
		  <div data-role="header" data-position="fixed" >
			 <h1>Opciones</h1>
		  </div>
		  <div data-role="content">
			 <ul id="lista" data-role="listview"></ul>
		  </div>
		  <div data-role="footer" data-position="fixed">
			 <!--<div data-role="navbar"data-theme="c">
				<ul>
				  <li><a href="#" id="refrescar" data-role="button" 
				         data-icon="refresh" >Refrescar</a>
				  </li>
				  <li><a href="#configurar" data-transition="slide" 
				        data-role="button" data-icon="gear">Opciones</a> 
				  </li>
				</ul>
			 </div>-->
		  </div>
		</div>
	
	
	<!-- Lista de planes -->
	<div data-role="page" id="list_plans_page">
		  <div data-role="header" data-position="fixed" >
			 <h1>Lista de planes</h1>
		  </div>
		  <div data-role="content">
		  
		  
		
		  
			 <ul id="list_plans" data-role="listview"><!-- Aqui tendrias que seleccionar un id-plan -->
			 	 <li><a href="#ver_plan"><h3>Plan A</h3><p><strong>Quedada el dia 15</strong></p></a> </li>
			 	 <li><a href="#ver_plan"><h3>Plan B</h3><p><strong>Quedada el dia 20</strong></p></a> </li>
	   		
			 </ul>
			 
		  </div>
		  <div data-role="footer" data-position="fixed">
			 <div data-role="navbar"data-theme="c">
				<ul>
				  <li><a href="#" id="refrescar" data-role="button" 
				         data-icon="refresh" >Refrescar</a>
				  </li>
				  <li><a href="#configurar" data-transition="slide" 
				        data-role="button" data-icon="gear">Opciones</a> 
				  </li>
				</ul>
			 </div>
		  </div>
		</div>
	
	<!-- Ver plan-->
	
	<div data-role="page" id="ver_plan">
		  <div data-role="header" data-position="fixed" >
			 <h1>Info plan</h1>
		  </div>
		  <div data-role="content"> 
		  </div>
		  <div data-role="footer" data-position="fixed">
			 <div data-role="navbar"data-theme="c">
				<ul>
				  <li><a href="#" id="refrescar" data-role="button" 
				         data-icon="refresh" >Volver</a>
				  </li>
				</ul>
			 </div>
		  </div>
		</div>
	
	<!--		Seccion de configuracion -->
	
	<div data-role="page" id="configurar">
		  <div data-role="header"  >
			 <h1>Opciones</h1>
		  </div>
		  <div data-role="fieldcontain">
			 <label for="slider">Numero de Feeds a Mostrar</label>
			 <br>
			 <input type="range" name="cantidad" 
				     id="cantidad" value="1" min="1" max="20"  />
			 <br>
			 <label for="slider">Tiempo de Actualización(min):</label>
			 <br>
			 <input type="range" name="tiempo" 
				     id="tiempo" value="1" min="1" max="20"  />
			 <p>
			 <label for="slider">Refrescar al Agitar</label>
				 <select name="shake" id="shake" data-role="slider">
				       <option value="off">Off</option>
				       <option value="on">On</option>
				 </select>
			 </p>
			 <p>Aplicación de prueba desarrollada por Chalalo. 
				No es una  aplicación oficial GeeksMS, si quieres modificarla, 
				siéntete con toda la  libertad.<br>
			 </p>
			  <p><a href="#principal" id="volver"  
				     data-role="button" data-icon="back">Volver</a> 
			  </p>
		  </div>
		  <div data-role="footer" data-position="fixed">
			 <h1>Seccion de opciones</h1>
		  </div>
	</div>
	
	
	
	
	<!-- Seccion para configurar el evento -->
	
	<div data-role="page" id="new_plan">
		  <div data-role="header"  >
			 <h1 id="new_plan">Nuevo plan</h1>
		  </div>
			 <p id="textfeed">
			 	
			 	
			 	<div id="zipDiv" data-role="fieldcontain">
			  		<label for="zip">Nombre plan</label>		
			  		<input id="zip" name="zip_r" type="text"/>
			  	</div>
				 
				 <div id="whatDiv" data-role="fieldcontain">
				 	<label id="whatLabel" for="what">Descripción</label>
				 	<textarea cols="40" rows="8" id="what" name="what_r"></textarea>
				 </div>
				 
				 <div id="whatDiv" data-role="fieldcontain">
				 	<label id="whatLabel" for="what">Preferencias</label>
				 	<textarea cols="40" rows="8" id="what" name="what_r"></textarea>
				 </div>
				
				
				 <div id="stateDiv" data-role="fieldcontain">
			  		<label id="stateLabel" for="state">Amigos</label>		
					<select id="state" name="state_r" tabindex="2">
                  <option value="ZZ">Selecciona a tus amigos</option>
    							<option value="AL">Alicia</option>
    							<option value="AK">Rafael</option>
    				</select>
    				
    				<div id="zipDiv" data-role="fieldcontain">
			  		<label for="zip">Amigos extra</label>		
			  		<input id="zip" name="zip_r" type="text"/>
			  	</div>
    </div>
				 

			 </p>
			 <p>
			 	<a href="#principal" id="volver"  data-role="button" data-icon="back">Dame plan</a>
			 	<a href="#principal" id="volver"  data-role="button" data-icon="back">Cancelar</a>
			 </p>
		  </div>
		  <div data-role="footer" data-position="fixed">
			 <h1>Seccion de opciones</h1>
		  </div>
	</div>
	
	
	
	
	
	<!-- Seccion de ver el feed -->
	
	<div data-role="page" id="feed">
		  <div data-role="header"  >
			 <h1 id="titleFeed">Feed</h1>
		  </div>
			 <p id="textfeed">
			 	Aplicación de prueba desarrollada por Chalalo. 
				No es una  aplicación oficial GeeksMS, si quieres modificarla, 
				siéntete con toda la  libertad.<br>
			 
			 
			 
			 </p>
			 <p><a href="#principal" id="volver"  data-role="button" data-icon="back">Volver</a></p>
		  </div>
		  <div data-role="footer" data-position="fixed">
			 <h1>Seccion de opciones</h1>
		  </div>
	</div>
	
	</body>
</html>

<script type="text/javascript" charset="utf-8">
	var cantidad=10;
	var tiempoRefresco=15;
   var watchID = null;
   
   var listFeeds = null;

/*
  function onDeviceReady() {
        navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
    }
*/

	 //$.mobile.changePage("#splash", "slide", false, true);
   
    // setTimeout( $.mobile.changePage("#principal", "slide", false, true), 2000);

$(document).ready(function(e) {
    //cargarFeeds(cantidad);
    //document.addEventListener("deviceready",startWatch(), false);
	/*setInterval(function() {
           cargarFeeds(cantidad);
	}, tiempoRefresco * 60000) 
*/
	loadOptions();


  $("#configurar").bind("pageshow", function() {
      $("#cantidad").val(cantidad).slider("refresh");
      $("#tiempo").val(tiempoRefresco).slider("refresh");
	  var shake = $("#shake");
	  if (watchID!=null){
    	  shake[0].selectedIndex = 1; 
	  }else{
    	 shake[0].selectedIndex =0; 
	  }
       shake.slider("refresh");
   });


   $("#volver").click(function(e) {
	   cantidad=$("#cantidad").val();
	   tiempoRefresco = $("#tiempo").val();
	     var shake = $("#shake");
	     if (shake[0].selectedIndex == 0){
			 	stopWatch();
		 }else{
			 if (watchID == null){
				startWatch();
			}
		 }
       cargarFeeds($("#cantidad").val());  
 	 //  $.mobile.changePage("#principal", "slide", false, true);
 	   $.mobile.changePage("#splash", "slide", false, true);
 	   
 	   setTimeout(loadMain(), 2000);
 	   
 	   
     });
	 
	 $("#refrescar").click(function(e) {
           cargarFeeds(cantidad);
     });
	 
	
	});


 function loadMain(){
 	
 	var randomnumber=Math.floor(Math.random()*6);
 	var transition = "fade";
 	switch(randomnumber){
 		case 0: transition = "slide";break;
 		case 1: transition = "slideup";break;
 		case 2: transition = "slidedown";break;
 		case 3: transition = "pop";break;
 		case 4: transition = "fade";break;
 		case 5: transition = "flip";break;
 	
 	}
 
 
 	$.mobile.changePage("#principal",transition, false, true);
 
 }

 function startWatch() {
        var options = { frequency: 3000 };
        watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
 }
  function stopWatch() {
     if (watchID) {
          navigator.accelerometer.clearWatch(watchID);
          watchID = null;
        }
    }
 
 
   function onSuccess(acceleration) {
	    var max = 1;
		if (Math.abs(acceleration.x) > max
			|| Math.abs(acceleration.y) > max
			|| Math.abs(acceleration.z) > max) {
		 	  cargarFeeds(cantidad);
        }
    }
 
 function onError() {
        alerta('Error al Agitar!','GeeksMS','Aceptar');
    }
	
function alerta(mensaje,titulo,boton) {
        navigator.notification.alert(mensaje,titulo,boton);
    }


function loadFeed(pos) {
         document.getElementById("textfeed").innerHTML =  listFeeds[pos].content;
         document.getElementById("titleFeed").innerHTML =  listFeeds[pos].title;
        
         
       //  entry.title
         //listFeeds[pos].contentSnippet
    }

function loadOptions(){
		var lista = $('#lista');
		
		var html="";
	   // Sincronizar datos.
	   html+="<li><a href='"+ "#new_plan" + "'><h3>Crear plan</h3>";
	   html+="<p><strong>Organiza e invita a tus amigos mas próximos. </strong></p></a></li>";

	
		html+="<li><a href='"+ "#list_plans_page" + "'><h3>Ver mis planes</h3>";
	   html+="<p><strong>Mira tus planes y a los que los que te han invitado.</strong></p></a></li>";
		
		lista.append(html);
		
		
		
		
		
		/*var listOptions=new Array(); 
		listOptions[0]="Sincronizar datos.";   
		listOptions[1]="Prácticar vocabulario";
		listOptions[2]="Configurar";
		listOptions[3] = "Estudiar vocabulario";

		for (var i = 0; i < listOptions.length;i++){
					var html="<li>";
	    			html+="<a href='"+ "#feed" + "' onClick='loadFeed("+i+")'><h3>"+ listOptions[i] +"</h3>";
	    			//html+="<p><strong>"+ entry.author +"</strong> - "+entry.publishedDate +"</p>";
					html+="</a></li>";
					lista.append(html);
		}*/
 }

function cargarFeeds1(cantidad){
	try{
	    $.mobile.loadingMessage = "Recuperando Feeds";
        $.mobile.showPageLoadingMsg('');	
 		$.jGFeed('http://geeks.ms/blogs/MainFeed.aspx',
 		function(feeds){
	 		if(!feeds){
		 		$.mobile.hidePageLoadingMsg();
		 		 alerta('Error , no se puede Obtener RSS!','GeeksMS','Aceptar');
				return false;
	 		}else{
	 			var lista = $('#lista');
	 			listFeeds = feeds.entries;
	 			
	 			
	 			
			    lista.html("<li data-role='list-divider' data-theme='a'>" + cantidad + " Post, Actualización :" + getFechaHora() + "</li>");
	  			for(var i=0; i<feeds.entries.length; i++){
					var entry = feeds.entries[i];
					var html="<li>";
					
					// for (key in entry)
						//  html+="For the Element " + "<b>"+entry[key]+"</b>" + " Key value is  " +"<b>"+key+"</b>"+"<br>";  
					
						//contentSnippet
					
					
		    			//html+="<a href='"+ entry.link + "'><h3>"+ entry.title +"</h3>";
		    			html+="<a href='"+ "#feed" + "' onClick='loadFeed("+i+")'><h3>"+ entry.title +"</h3>";
		    			html+="<p><strong>"+ entry.author +"</strong> - "+entry.publishedDate +"</p>";
						html+="</a></li>";
					lista.append(html);
					lista.listview("refresh");
	   			}	
				$.mobile.hidePageLoadingMsg();
	 	}}, cantidad);
		 
		 return true;
	}catch(err){
		  alerta('Error , no se puede Obtener RSS!','GeeksMS','Aceptar');
	}
 }

function cargarFeeds(cantidad){
	try{
	    $.mobile.loadingMessage = "Cargando planes";
        $.mobile.showPageLoadingMsg('');	
 		$.jGFeed('http://localhost/api/get_plans.php',
 		function(feeds){
	 		if(!feeds){
		 		$.mobile.hidePageLoadingMsg();
		 		 alerta('Error , no se puede Obtener RSS!','GeeksMS','Aceptar');
				return false;
	 		}else{
	 			var lista = $('#lista');
	 			listFeeds = feeds.entries;
	 			
	 			
	 			
			    lista.html("<li data-role='list-divider' data-theme='a'>" + cantidad + " Post, Actualización :" + getFechaHora() + "</li>");
	  			for(var i=0; i<feeds.entries.length; i++){
					var entry = feeds.entries[i];
					var html="<li>";
					
					// for (key in entry)
						//  html+="For the Element " + "<b>"+entry[key]+"</b>" + " Key value is  " +"<b>"+key+"</b>"+"<br>";  
					
						//contentSnippet
					
					
		    			//html+="<a href='"+ entry.link + "'><h3>"+ entry.title +"</h3>";
		    			html+="<a href='"+ "#feed" + "' onClick='loadFeed("+i+")'><h3>"+ entry.title +"</h3>";
		    			html+="<p><strong>"+ entry.author +"</strong> - "+entry.publishedDate +"</p>";
						html+="</a></li>";
					lista.append(html);
					lista.listview("refresh");
	   			}	
				$.mobile.hidePageLoadingMsg();
	 	}}, cantidad);
		 
		 return true;
	}catch(err){
		  alerta('Error , no se puede Obtener RSS!','GeeksMS','Aceptar');
	}
 }



function getFechaHora(fec){
	var fec=new Date; 
	var dia=fec.getDate(); 
	var mes=fec.getMonth(); 
	var anio=fec.getFullYear(); 
	var horas = fec.getHours() ; 
	var minutos = fec.getMinutes() ; 
	var segundos = fec.getSeconds() ; 
	if (dia<10) dia='0'+dia; 
	if (mes<10) mes='0'+mes; 

	if (horas <10) horas = "0" + horas; 
	if (minutos <10) minutos = "0" + minutos; 
	if (segundos <10) segundos = "0" + segundos; 

   return anio+'/'+mes+'/'+dia+" "+horas+":"+minutos+":"+segundos;  	
}
</script>
